import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:xinxuan/common/button_util.dart';
import 'package:xinxuan/common/count_down.dart';
import 'package:xinxuan/common/goods_swiper_custom_pagination.dart';
import 'package:xinxuan/common/dialogs/redeem_dialog.dart';
import 'package:xinxuan/common/scroll_configuration_common.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xinxuan/common/swiper_util.dart';
import 'package:xinxuan/controllers/blind_box/blind_box_detail_page_controller.dart';
import 'package:xinxuan/router/app_routers.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:get/get.dart';
import 'package:common_utils/common_utils.dart';

class BlindBoxDetailPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return GetBuilder<BlindBoxDetailPageController>(
      init: BlindBoxDetailPageController(),
      builder: (controller) {
        return Scaffold(
          appBar: AppBarUtil(
            title: '商品详情'
          ),
          body: ScrollConfigurationCommon(child: ListView(
            children: [
              SwiperUtil(
                images: controller.data.value.data!.images!, 
                width: 375.w,
                height: 375.w,
                pagination: GoodsSwiperCustomPagination(length: controller.data.value.data!.images!.length),
              ),
              _activityBar(controller),
              SizedBox(height: 12.h),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '${controller.data.value.data!.title}',
                      style: TextStyle(
                        color: textBlackColor,
                        fontSize: 16.sp,
                        fontWeight: FontWeight.bold
                      )
                    ),
                    SizedBox(height: 12.h),
                    Text(
                      '${controller.data.value.data!.subtitle}',
                      style: TextStyle(
                        color: textSubtitleColor,
                        fontSize: 12.sp
                      )
                    ),
                    SizedBox(height: 6.h),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Container(
                          padding: EdgeInsets.symmetric(horizontal: 5.w),
                          margin: EdgeInsets.only(right: 6.w),
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: bgMainColor,
                              width: .5
                            ),
                            borderRadius: BorderRadius.circular(3.w)
                          ),
                          child: Text(
                            '${controller.data.value.data!.statusStr}',
                            style: TextStyle(
                              color: mainTextColor,
                              fontSize: 10.sp
                            ),
                          ),
                        ),
                        Expanded(child: Text(
                          '${controller.data.value.data!.tips}',
                          style: TextStyle(
                            color: textBlackColor,
                            fontSize: 12.sp
                          ),
                        ))
                      ],
                    )
                  ],
                ),
              ),
              SizedBox(height: 12.h),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: controller.data.value.meta!.status!.asMap().keys.map((index) {
                  return Row(
                    children: [
                      index == 0 ? Container() : Container(
                        width: 84.w,
                        height: 1.h,
                        color: controller.data.value.data!.status! >= index + 1 ? bgMainColor : bgSubColor,
                      ),
                      Container(
                        height: 20.h,
                        padding: EdgeInsets.symmetric(horizontal: 12.w),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10.w),
                          color: controller.data.value.data!.status! >= index + 1 ? bgMainColor : bgSubColor
                        ),
                        child: Text(
                          '${controller.data.value.meta!.status![index].value}',
                          style: TextStyle(
                            color: textWhiteColor,
                            fontSize: 12.sp
                          ),
                        ),
                      )
                    ],
                  );
                }).toList(),
              ),
              SizedBox(height: 12.h),
              Container(
                alignment: Alignment.center,
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 2.h),
                  decoration: BoxDecoration(
                    color: bgRecoveryStatus,
                    borderRadius: BorderRadius.circular(20.w)
                  ),
                  child: Text(
                    '开签时间：${controller.data.value.data!.lotteryTime}',
                    style: TextStyle(
                      color: textBlackColor,
                      fontSize: 12.sp
                    ),
                  ),
                ),
              ),
              SizedBox(height: 12.h),
              Container(
                height: 12.h,
                color: pageBgColor,
              ),
              TextUtil.isEmpty(controller.data.value.data!.rewardRules) ? Container() : Container(
                padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 20.h),
                child: Column(
                  children: [
                    Image.asset(
                      'assets/icons/icon_reward_rules.png',
                      width: 144.w,
                      height: 20.h,
                    ),
                    SizedBox(height: 12.h),
                    HtmlWidget(
                      '${controller.data.value.data!.rewardRules}',
                      customStylesBuilder: (element) {
                        return {
                          'vertical-align': 'middle'
                        };
                      },
                    )
                  ],
                ),
              ),
              // Image.asset(
              //   'assets/icons/icon_goods_detail.png',
              //   width: 144.w,
              //   height: 20.h,
              // ),
              // SizedBox(height: 20.h),
              HtmlWidget(
                '${controller.data.value.data!.description}',
                customStylesBuilder: (element) {
                  return {
                    'vertical-align': 'middle'
                  };
                },
              )
            ],
          )),
          bottomNavigationBar: BottomAppBar(
            child: Container(
              height: 56.h,
              padding: EdgeInsets.symmetric(horizontal: 12.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: _getBtns(
                  isPurchase: controller.data.value.data!.isPurchase!, 
                  isRenewal: controller.data.value.data!.isRenewal!, 
                  orderSn: controller.data.value.data!.orderSn!, 
                  controller: controller,
                  price: controller.data.value.data!.price!
                ),
              ),
            ),
          ),
        );
      }
    );
  }

  /// 价格，积分，活动时间Bar
  Widget _activityBar(BlindBoxDetailPageController controller) {
    return Container(
      height: 51.h,
      decoration: BoxDecoration(
        color: blindBoxDetailActivityTimeBg,
        borderRadius: BorderRadius.circular(5.w)
      ),
      child: Row(
        children: [
          Expanded(child: Container(
            height: 51.h,
            padding: EdgeInsets.symmetric(horizontal: 12.w),
            decoration: BoxDecoration(
              // borderRadius: BorderRadius.circular(5.w),
              borderRadius: BorderRadius.horizontal(right: Radius.circular(5.w)),
              gradient: LinearGradient(
                colors: [
                  bgExcessiveColor,
                  bgMainColor
                ]
              )
            ),
            child: Row(
              children: [
                Expanded(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text.rich(
                        TextSpan(
                          text: '¥',
                          style: TextStyle(
                            color: textWhiteColor,
                            fontSize: 12.sp,
                            fontWeight: FontWeight.bold
                          ),
                          children: [
                            TextSpan(
                              text: controller.data.value.data!.price,
                              style: TextStyle(
                                color: textWhiteColor,
                                fontSize: 22.sp,
                                fontWeight: FontWeight.bold
                              )
                            ),
                          ]
                        )
                      ),
                      // SizedBox(width: 3.w),
                      // Text(
                      //   '+${controller.data.value.data!.integral}积分',
                      //   style: TextStyle(
                      //     color: textWhiteColor,
                      //     fontSize: 12.sp
                      //   ),
                      // )
                    ],
                  )
                ),
                Container(
                  alignment: Alignment.center,
                  padding: EdgeInsets.symmetric(vertical: 8.h),
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 10.w),
                    // height: 32.h,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: bgWhiteColor_50,
                      borderRadius: BorderRadius.circular(5.w)
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          '${controller.data.value.data!.sales}人',
                          style: TextStyle(
                            color: textWhiteColor,
                            fontSize: 10.sp
                          ),
                        ),
                        Text(
                          '已预约',
                          style: TextStyle(
                            color: textWhiteColor,
                            fontSize: 10.sp
                          ),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          )),
          Container(
            width: 102.w,
            height: 51.h,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  '活动剩余时间',
                  style: TextStyle(
                    color: mainTextColor,
                    fontSize: 12.sp
                  ),
                ),
                controller.data.value.data!.id! <= 0 ? Container() : CountDown(controller.data.value.data!.remainingTime!),
              ],
            ),
          )
        ],
      ),
    );
  }

  List<Widget> _getBtns({ required int isPurchase, required int isRenewal, required String orderSn, required BlindBoxDetailPageController controller, required String price }) {
    List<Widget> widgets = [];
    // isRenewal = 1;
    if (isRenewal == 0) {
      if (isPurchase == 0) {
        widgets = [
          Container(
            width: 120.w,
            child: ButtonUtil(
              text: '立即预约', 
              fontSize: 14.sp, 
              borderRadius: 30.w, 
              height: 36.h, 
              onTop: () {
                Get.toNamed(
                  '${AppRouters.COMMON_PAGE}${AppRouters.BLIND_BOX_DETAIL_PAGE}${AppRouters.BLIND_BOX_CONFIRM_ORDER_PAGE}',
                  arguments: {
                    'image': controller.data.value.data!.thumbnail,
                    'title': controller.data.value.data!.title,
                    'price': controller.data.value.data!.price,
                    'integral': controller.data.value.data!.integral,
                    'id': controller.data.value.data!.id,
                  }
                );
              }
            )
          )
        ];
      } else {
        widgets = [
          Container(
            width: 120.w,
            child: ButtonUtil(
              text: '立即预约', 
              fontSize: 14.sp, 
              borderRadius: 30.w, 
              height: 36.h, 
              textColor: textSubtitleColor,
              bgColors: [
                bgDisplayColor,
                bgDisplayColor,
              ],
              onTop: () {}
            ),
          )
        ];
      }
    } else {
      widgets = [
        Container(
          width: 120.w,
          child: ButtonUtil(
            text: '预约赎回', 
            fontSize: 14.sp, 
            borderRadius: 30.w, 
            height: 36.h, 
            onTop: () {
              if (TextUtil.isEmpty(orderSn)) {
                EasyLoading.showToast('订单异常');
                return;
              }
              Get.dialog(
                RedeemDialog(
                  price: price,
                  onTap: () => controller.redeem(),
                ),
                barrierDismissible: false,
              );
            }
          )
        ),
        Container(
          width: 120.w,
          margin: EdgeInsets.only(left: 12.w),
          child: ButtonUtil(
            text: '继续预约', 
            fontSize: 14.sp, 
            borderRadius: 30.w, 
            height: 36.h, 
            onTop: () {
              controller.continueAppointment();
            }
          )
        )
      ];
    } 
    return widgets;
  }
}